<template>
    <div id="data">
        <data-control class="data-control" @setParams="setParams"></data-control>
        <div class="content" v-for="(item, index) in data" :key="item.id">
            <div class="cardBox">
                <div class="headerBox">
                    <div class="data-img-scene" @click="onPreview(item.sceneImgPath)"><img :src="item.sceneImgPath"/></div>
                    <div class="data-img-cutout" v-show="type == 'person'" @click="onPreview(item.bodyImgPath)"><img :src="item.bodyImgPath"/></div>
                    <div class="data-img-cutout" v-show="type == 'vehicle'" @click="onPreview(item.vehicleImgPath)"><img :src="item.vehicleImgPath"/></div>
                </div>
                <el-divider></el-divider>
                <div v-show="type == 'person'" class="bodyBox">
                    <p><span class="label">性别</span><span class="value">{{item.gender}}</span></p>
                    <p><span class="label">年龄段</span><span class="value">{{item.age}}</span></p>
                    <p><span class="label">上衣样式</span><span class="value">{{item.upperWear}} - {{item.upperColor}}</span></p>
                    <p><span class="label">下装样式</span><span class="value">{{item.lowerWear}} - {{item.lowerColor}}</span></p>
                    <p><span class="label">是否戴帽</span><span class="value">{{item.headwear}}</span></p>
                    <p><span class="label">是否戴眼镜</span><span class="value">{{item.glasses}}</span></p>
                    <p><span class="label">是否戴口罩</span><span class="value">{{item.faceMask}}</span></p>
                    <p><span class="label">是否背包</span><span class="value">{{item.bag}}</span></p>
                    <p><span class="label">手提物</span><span class="value">{{item.carryingItem}}</span></p>
                    <p><span class="label">交通工具</span><span class="value">{{item.vehicle}}</span></p>
                    <p><span class="label">抓拍相机</span><span class="value">{{item.cameraName}}</span></p>
                    <p><span class="label">时间</span><span class="value value-datetime">{{item.enterTime | timeformat}}</span></p>
                    <p style="text-align: right">
                        <span class="btn-replay">
                            <el-link type="primary" icon="el-icon-video-camera" @click="replay(item.cameraName, item.enterTime)">
                                录像回放
                            </el-link>
                        </span>
                    </p>
                </div>
                <div v-show="type == 'vehicle'" class="bodyBox">
                    <p><span class="label">抓拍相机</span><span class="value">{{item.cameraName}}</span></p>
                    <p><span class="label">车辆类型</span><span class="value">{{item.type}}</span></p>
                    <p><span class="label">时间</span><span class="value value-datetime">{{item.enterTime | timeformat}}</span></p>
                    <p style="text-align: right">
                        <span class="btn-replay">
                            <el-link type="primary" icon="el-icon-video-camera" @click="replay(item.cameraName, item.enterTime)">
                                录像回放
                            </el-link>
                        </span>
                    </p>
                </div>
            </div>
            <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="viewerUrlList"/>
        </div>
    </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import DataControl from '../components/data/DataControl'

export default {
    components: {ElImageViewer, DataControl},
    data() {
        return {
            data: [],
            type: 'vehicle',
            cameraName: null,
            startDatetime: '',
            endDatetime: '',
            showViewer: false,
            viewerUrlList: []
        };
    },
    methods: {
        setParams(typeSelected, cameraSelected, startDatetime, endDatetime) {
            this.type = typeSelected;
            this.cameraName = cameraSelected;
            this.startDatetime = startDatetime;
            this.endDatetime = endDatetime;
            this.getData();
        },
        getData() {
            var requestUrl = "/api/video/data/" + this.type + 
            "?startDatetime=" + this.startDatetime + "&endDatetime=" + this.endDatetime;
            if(this.cameraName != null && this.cameraName != '') {
                requestUrl = requestUrl + "&cameraName=" + this.cameraName;
            }
            this.$axios.get(requestUrl).then(response => {
                if (response.data.success) {
                    this.data = response.data.o;
                    console.log(this.data);
                }
            }).catch(error => {

            })
        },
        replay(cameraName, enterTime) {
            var endTimestamp = this.timeformat(enterTime);
            var endDateTime = new Date(endTimestamp);
            endDateTime.setSeconds(endDateTime.getSeconds() + 10);
            endTimestamp = this.getStrDatetime(endDateTime);
            this.$router.push({path: "/replay", query: {"cameraName": cameraName, "startTime": enterTime, "endTime": endTimestamp}});
        },
        onPreview(path) {
            // this.viewerUrlList.push(this.data[index].sceneImgPath);
            // if (this.type == 'person') {
            //     this.viewerUrlList.push(this.data[index].bodyImgPath);
            // }else if(this.type == 'vehicle'){
            //     this.viewerUrlList.push(this.data[index].vehicleImgPath);
            // }
            this.viewerUrlList.push(path);
            this.showViewer = true;
        },
        closeViewer() {
            this.showViewer = false;
            this.viewerUrlList = [];
        },
        timeformat(timestamp) {
            return timestamp.substr(0, 4) + "/" 
            + timestamp.substr(4, 2) + "/"
            + timestamp.substr(6, 2) + " "
            + timestamp.substr(8, 2) + ":"
            + timestamp.substr(10, 2) + ":"
            + timestamp.substr(12);
        },
        getStrDatetime(date) {
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            if(month < 10)
                month = '0' + month;
            if(day < 10)
                day = '0' + day;
            if(hours < 10)
                hours = '0' + hours;
            if(minutes < 10)
                minutes = '0' + minutes;
            if(seconds < 10)
                seconds = '0' + seconds;
            return '' + year + month + day + hours + minutes + seconds;
        }
    },
    mounted() {
    },
    filters: {
        timeformat(timestamp) {
            return timestamp.substr(0, 4) + "-" 
            + timestamp.substr(4, 2) + "-"
            + timestamp.substr(6, 2) + " "
            + timestamp.substr(8, 2) + ":"
            + timestamp.substr(10, 2) + ":"
            + timestamp.substr(12);
        }
    }
};
</script>

<style scoped>
.data-control {
    background-color:#000060;
    z-index: 99;
}

#data .content {
    margin-top: 60px;
    margin-left: 20px;
}

.el-divider--horizontal {
    margin: 0;
    height: 1px;
    background-color: lightgrey;
}

.cardBox {
    width: 235px;
    text-align: left;
    float: left;
    margin: 0 15px 15px 0;
}

.headerBox {
    background-color: white;
    text-align: center;
    display: flex;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    height: 120px;
}

.data-img-scene {
    width: 75%;
}

.data-img-cutout {
    width: 25%;
}

.headerBox img {
    object-fit: contain;
    width: 100%;
    height: 120px;
    max-height: 120px;
    overflow: hidden;
    /* height: 125px;
    max-height: 200px;
    max-width: 100%; */
}

.bodyBox {
    padding: 10px;
    background: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.bodyBox p {
    font-size: 14px;
    margin: 0 5px 5px 5px;
    border-bottom: 1px solid lightgrey;
}

.label {
}

.value {
    float: right;
    color:lightslategrey;
}

.value-datetime {
    font-size: 13px;
    vertical-align: bottom;
}

</style>